<template>
  <div class="comment-mang">
    <h2>评论管理</h2>
    <!-- 1. 选择组织 -->
    <div class="org-select">
      <label>选择组织：</label>
      <el-select v-model="selectedOrgId" placeholder="请选择组织" @change="fetchActivityList">
        <el-option v-for="org in orgList" :key="org.orgId" :label="org.name" :value="org.orgId" />
      </el-select>
    </div>

    <!-- 2. 显示活动列表 -->
    <div v-if="activityList.length > 0" class="activity-list">
      <h3>活动列表</h3>
      <el-table :data="activityList" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="title" label="活动名称" />
        <el-table-column prop="status" label="状态" />
      </el-table>
    </div>
    <div v-else-if="selectedOrgId" class="no-activity">暂无活动</div>

    <!-- 评论列表弹窗中的prop和评论详情弹窗中的currentcomment中的值可能会出问题 -->
     
    <!-- 3. 评论列表弹窗 -->
    <el-dialog v-model="commentDialogVisible" title="活动评论列表" width="600px" :close-on-click-modal="false">
      <div v-if="commentList && commentList.length > 0">
        <el-table :data="commentList" style="width: 100%" @row-click="handleCommentRowClick">
          <el-table-column prop="stuId" label="学生ID" width="120" />
          <el-table-column prop="score" label="评分" width="80" />
          <el-table-column prop="comment" label="评论内容" />
        </el-table>
        <div style="color:#aaa; margin-top:12px;" v-if="commentList.length === 0">暂无评论</div>
      </div>
      <div v-else style="color:#aaa; text-align:center;">暂无评论</div>
    </el-dialog>

    <!-- 4. 评论详情弹窗 -->
    <el-dialog v-model="commentDetailDialogVisible" title="评论详情" width="400px" :close-on-click-modal="false">
      <div v-if="currentComment">
        <div class="detail-row"><span class="label">学生ID：</span>{{ currentComment.stuId }}</div>
        <div class="detail-row"><span class="label">评分：</span>{{ currentComment.score }}</div>
        <div class="detail-row"><span class="label">评论内容：</span>{{ currentComment.comment }}</div>
        <div class="detail-row" style="margin-top: 18px;">
          <el-button size="small" type="danger" @click="handleDeleteComment(currentComment)">删除评论</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const orgList = ref([])
const activityList = ref([])
const selectedOrgId = ref(null)
const adminId = localStorage.getItem('adminId')

const commentDialogVisible = ref(false)
const commentList = ref([])
const currentActId = ref(null)

const commentDetailDialogVisible = ref(false)
const currentComment = ref(null)

// 获取组织列表
const fetchOrgList = async () => {
  try {
    const res = await axios.get(`http://localhost:8080/admin/${adminId}/getOrgList`)
    if (res.data && res.data.code === 200) {
      orgList.value = res.data.data || []
    } else {
      ElMessage.error(res.data.msg || '获取组织列表失败')
    }
  } catch (e) {
    ElMessage.error('网络错误，无法获取组织列表')
  }
}

// 获取活动列表
const fetchActivityList = async () => {
  activityList.value = []
  if (!selectedOrgId.value) return
  try {
    const res = await axios.get(`http://localhost:8080/admin/${adminId}/${selectedOrgId.value}/getOrgActivityList`)
    if (res.data && res.data.code === 200) {
      activityList.value = res.data.data || []
    } else {
      ElMessage.error(res.data.msg || '获取活动列表失败')
    }
  } catch (e) {
    ElMessage.error('网络错误，无法获取活动列表')
  }
}

// 行点击事件，弹出评论列表
const handleRowClick = async (row) => {
  currentActId.value = row.actId || row.activityId
  commentList.value = []
  try {
    const res = await axios.get(`http://localhost:8080/admin/${currentActId.value}/getComment`)
    if (res.data && res.data.code === 200 && Array.isArray(res.data.data)) {
      commentList.value = res.data.data
    } else {
      commentList.value = []
      ElMessage.info(res.data.msg || '暂无评论')
    }
    commentDialogVisible.value = true
  } catch (e) {
    ElMessage.error('网络错误，无法获取评论')
  }
}

// 评论行点击，弹出详情
const handleCommentRowClick = (row) => {
  currentComment.value = row
  commentDetailDialogVisible.value = true
}

// 删除评论
const handleDeleteComment = async (comment) => {
  try {
    const res = await axios.delete(
      `http://localhost:8080/admin/${adminId}/${currentActId.value}/${comment.stuId}/deleteComment`
    )
    if (res.data && res.data.code === 200) {
      ElMessage.success('评论删除成功')
      commentDetailDialogVisible.value = false
      // 重新获取评论列表
      handleRowClick({ actId: currentActId.value })
    } else {
      ElMessage.error(res.data.msg || '评论删除失败')
    }
  } catch (e) {
    ElMessage.error('网络错误，无法删除评论')
  }
}

onMounted(fetchOrgList)
</script>

<style scoped lang="scss">
.comment-mang {
  max-width: 700px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(90, 169, 233, 0.10);
  padding: 32px 28px;

  h2 {
    text-align: center;
    color: #357ab8;
    margin-bottom: 24px;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .org-select {
    margin-bottom: 32px;
    display: flex;
    align-items: center;

    label {
      font-size: 1.1rem;
      color: #357ab8;
      margin-right: 12px;
      font-weight: 500;
    }

    .el-select {
      min-width: 220px;
    }
  }

  .activity-list {
    margin-top: 12px;

    h3 {
      color: #357ab8;
      margin-bottom: 16px;
      font-size: 1.2rem;
      font-weight: 500;
    }
  }

  .no-activity {
    margin-top: 32px;
    color: #aaa;
    text-align: center;
    font-size: 1.1rem;
  }
}

.detail-row {
  margin-bottom: 12px;
  font-size: 1.08rem;
  .label {
    color: #357ab8;
    font-weight: 500;
    margin-right: 8px;
  }
}
</style>